<template>
  <div class="subtitle-details">
    <h4>字幕文件详情 ({{ project.subtitles.length }})</h4>
    <el-table 
      :data="project.subtitles" 
      size="small" 
      border
      :show-header="project.subtitles.length > 0"
      max-height="300"
    >
      <el-table-column prop="language" label="语言" width="120" />
      <el-table-column label="状态" width="120">
        <template #default="{ row: subtitle }">
          <el-tag :type="subtitleStatusType(subtitle.status)" size="small">
            {{ subtitleStatusText(subtitle.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="file_path" label="文件路径" show-overflow-tooltip />
      <el-table-column label="创建于" width="180">
        <template #default="{ row: subtitle }">
          {{ formatDate(subtitle.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="更新于" width="180">
        <template #default="{ row: subtitle }">
          {{ formatDate(subtitle.updated_at) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import type { Project } from '../../api/projects';

interface Props {
  project: Project;
  subtitleStatusText: (status: any) => string;
  subtitleStatusType: (status: any) => string;
}

defineProps<Props>();

// 日期格式化缓存
const dateCache = new Map<string, string>();
const formatDate = (dateString: string): string => {
  if (dateCache.has(dateString)) {
    return dateCache.get(dateString)!;
  }
  const formatted = new Date(dateString).toLocaleString();
  dateCache.set(dateString, formatted);
  return formatted;
};
</script>

<style scoped>
.subtitle-details {
  padding: 15px 20px;
  background-color: #f9f9f9;
}

.subtitle-details h4 {
  margin-top: 0;
  margin-bottom: 10px;
}
</style>
